﻿@page "/kanban/swimlane"
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Kanban
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns

<SampleDescription>
    <p>This example demonstrates the swimlane functionalities of Kanban component. Provided options in the property panel to sort the cards, enable drag-and-drop across swimlanes, show or hide the empty row, items count and swimlane frozen rows. Also, you can expand/collapse the swimlane row in the Kanban board.</p>
</SampleDescription>
<ActionDescription>
    <p>This sample renders the assignee field as a swimlane header using the <code>KanbanSwimlaneSettings</code> property. The property provides the following options to change its related settings:</p>
    <ul>
        <li>Sorting the swimlane cards using the <code>KanbanSwimlaneSettings.SortDirection</code> property</li>
        <li>Component the drag-and-drop of the cards across swimlane using the <code>KanbanSwimlaneSettings.AllowDragAndDrop</code> property.</li>
        <li>Show or hide the empty swimlane row using the <code>KanbanSwimlaneSettings.ShowEmptyRow</code> property.</li>
        <li>Show or hide the items count in the swimlane header using the <code>KanbanSwimlaneSettings.ShowItemCount</code> property.</li>
        <li>Enable or disable the frozen swimlane rows using the <code>SwimlaneSettings.EnableFrozenRows</code> property.</li>
    </ul>
</ActionDescription>

<div class="col-lg-9 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData" Height="500px">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings ContentField="Summary" HeaderField="Id"></KanbanCardSettings>
        <KanbanSwimlaneSettings KeyField="Assignee" AllowDragAndDrop="@allowDragAndDrop" ShowItemCount="@showItemCount" SortDirection="@sortDirection" EnableFrozenRows="@enableFrozenRows"></KanbanSwimlaneSettings>
    </SfKanban>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table class="property-panel-table" title="Properties">
                <tr>
                    <td>Sort Direction</td>
                    <td>
                        <div>
                            <SfDropDownList TItem="KanbanDataModel" TValue="string" DataSource="@SortData" @bind-Index="@index" PopupHeight="200px">
                                <DropDownListFieldSettings Text="Value" Value="Value"></DropDownListFieldSettings>
                                <DropDownListEvents TItem="KanbanDataModel" TValue="string" ValueChange="@ChangeSortOrder"></DropDownListEvents>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Enable Swimlane Drag And Drop</td>
                    <td>
                        <SfCheckBox Checked="@allowDragAndDrop" ValueChange="@((args) => { allowDragAndDrop = args.Checked; })" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
                <tr>
                    <td>Show Swimlane Item Count</td>
                    <td>
                        <SfCheckBox Checked="@showItemCount" ValueChange="@((args) => { showItemCount = args.Checked; })" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
                <tr>
                    <td>Enable Frozen Rows</td>
                    <td>
                        <SfCheckBox Checked="@enableFrozenRows" ValueChange="@((args) => { enableFrozenRows = args.Checked; })" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<style>
    .property-panel-section table {
        width: 100%;
    }

        .property-panel-section table tr {
            height: 50px;
        }

        .property-panel-section table td {
            padding-left: 10px;
            width: 50%;
        }
</style>

@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<KanbanDataModel> SortData = new KanbanDataModel().SortDropDowns();
    private SortDirection sortDirection { get; set; } = SortDirection.Ascending;
    private bool allowDragAndDrop { get; set; } = false;
    private bool showItemCount { get; set; } = true;

    private bool enableFrozenRows { get; set; } = false;
    private int? index { get; set; } = 0;
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open" } },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress"} },
        new ColumnModel(){ HeaderText= "Done", KeyField= new List<string>() { "Close" } }
    };

    private void ChangeSortOrder(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, KanbanDataModel> args)
    {
        this.sortDirection = (args.Value == "Ascending") ? SortDirection.Ascending : SortDirection.Descending;
    }
}
